<template>
	<div>
		<div id="visitChart" style="width: 100%; height: 230px"></div>
	</div>
</template>

<script>
// import echarts from "echarts";
import * as echarts from "echarts";
export default {
	data() {
		return {
			list: [{ num: 20 }, { num: 35 }, { num: 17 }, { num: 60 }, { num: 32 }, { num: 44 }, { num: 24 }, { num: 36 }, { num: 32 }, { num: 72 }, { num: 80 }, { num: 52 }, { num: 32 }]
		};
	},
	mounted() {
		this.onVisitChart();
	},
	methods: {
		onVisitChart() {
			const data = [];
			const dataAxis = [];
			const dataShadow = [];
			for (let i = 0; i < this.list.length; i++) {
				data.push(this.list[i].num);
				dataAxis.push(i);
				dataShadow.push(100);
			}
			const option = {
				grid: {
					height: '80%',
					top: 'middle',
					right: 0
				},
				tooltip: {
					transitionDuration: 0,
					show: false,
					trigger: "none",
					axisPointer: {
						type: 'none'
					}
				},
				xAxis: {
					type: "category",

					splitLine: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false
					},
					data: dataAxis
				},
				yAxis: {
					type: "value",
					min: 0,
					max: 100,
					splitLine: {
						show: false
					},
					axisLine: {
						show: false
					}
				},
				series: [
					// {
					// 	type: "bar",
					// 	barGap: "-100%",
					// 	// legendHoverLink: false,
					// 	itemStyle: {
					// 		color: "#eee",
					// 		barBorderRadius: [10, 10, 10, 10]
					// 	},
					// 	data: dataShadow
					// },
					{
						type: "bar",
						showBackground: true,
						itemStyle: {
							color: "#57cece",
							barBorderRadius: [10, 10, 10, 10]
						},
						data: data
					}
				]
			};
			const visitChart = echarts.init(document.getElementById("visitChart"));
			visitChart.setOption(option, true);
			window.addEventListener("resize", function () {
				visitChart.resize();
			});
		}
	}
};
</script>

<style>
.cd {
	color: #57cece;
}
</style>
